<template>
  <view class="repair-order-list">
    <view class="list-content">
      <easyDataList :data-list="dataList" :is-loading="isLoading" :is-more="isMore" :is-reloding="isReloding" :is-empty="dataList.length < 1 && !isLoading" @list-item-click="toDetail" @load-more="loadMore" @refresh="refresh" @tab-change="tabChange">
        <view class="data-item" slot-scope="{scope}">
          <view class="img-content">
            <view>
              <img :src="scope.eqPic" alt="">
            </view>
          </view>
          <view class="info-content">
            <table>
              <tr>
                <td class="key">
                  <text>申请单号:</text>
                </td>
                <td class="value">
                  <text>{{ scope.workCode }}</text>
                </td>
              </tr>
              <tr>
                <td class="key">
                  <text>设备编号:</text>
                </td>
                <td class="value">
                  <text>{{ scope.eqCode }}</text>
                </td>
              </tr>
              <tr>
                <td class="key">
                  <text>设备名称:</text>
                </td>
                <td class="value">
                  <text>{{ scope.eqName }}</text>
                </td>
              </tr>
              <tr>
                <td class="key">
                  <text>科室名称:</text>
                </td>
                <td class="value">
                  <text>{{ scope.officeName }}</text>
                </td>
              </tr>
              <tr>
                <td class="key">
                  <text>维修状态:</text>
                </td>
                <td class="value">
                  <text>{{ statusObj['status' + scope.workStatus] }}</text>
                </td>
              </tr>
            </table>
          </view>
          <!--<view>-->
          <!--<view class="title">{{scope.workCode}}</view>-->
          <!--<view class="device-name">{{scope.eqName}}</view>-->
          <!--<text class="time">{{scope.createTime}}</text>-->
          <!--<uni-icons class="icon-right" type="forward" size="16"></uni-icons>-->
          <!--</view>-->
        </view>
      </easyDataList>
    </view>
  </view>
</template>

<script>
  import easyDataList from '../../../../components/list/easyDataList.vue';
  import {
    getEquipmentInfo,
    getOrderList,
  } from '../../../../api/device/device.js';
  import listMixins from '../../../order/list-mixins.js';
  
  export default {
    components: {
      easyDataList,
    },
    mixins: [ listMixins ],
    data() {
      return {
      };
    },
    created() {
    },
    methods: {
      async getData() {
        this.isLoading = true;
        const param = {
          ...this.pageData,
          workStatus: this.workStatus,
        };
        const res = await getOrderList(param).catch(() => {
          this.isLoading = false;
          this.isReloding = false;
        });
        this.isLoading = false;
        this.isReloding = false;
        if (res.code === 200) {
          this.dataList = [ ...this.dataList, ...res.rows ];
          this.isMore = this.dataList.length < res.total;
          console.log(this.dataList.length > res.total, 123123);
        }
        console.log(res);
      },
      addNew() {
        uni.navigateTo({
          url: `/pages/order/add-new/addNew`,
        });
      },
      toDetail(data) {
        uni.navigateTo({
          // url: `/pages/order/order-info/repair/orderInfo?workId=${data.workId}`,
          url: `/pages/order/order-static-list/repair/staticList?workId=${data.workId}`,
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import "../style";
  
  .repair-order-list {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: white;
    
    .list-content {
      flex: 1;
      overflow: hidden;
      
      /*.data-item {
        padding: 10px;
        
        > view {
          position: relative;
          padding-right: 26px;
          
          .title,
          .device-name {
            font-size: 14px;
            line-height: 1.5;
          }
          
          .device-name {
            margin-top: 10px;
          }
          
          .time {
            font-size: 12px;
            margin-top: 10px;
            line-height: 1;
            display: block;
            color: #ccc;
          }
          
          .icon-right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #ccc !important;
            display: block;
            right: 0;
          }
          
        }
      }*/
    }
    
    .btn-content {
      padding: 10px;
    }
  }
</style>
